<template>
  <view class="s-row-wrap" :class="custom_class" :style="c_style">
    <view class="s-row" :class="row_class" :style="row_style">
      <slot />
    </view>
  </view>
</template>

<script>
import componentMixin from '../../mixins/componentMixin';

/**
 * s-row 栅格布局
 * @description 栅格组件父元素
 * @property {String} gutter 列元素水平之间的间距（默认单位为 rpx）
 * @property {String} gutterY 列元素垂直之间的间距（默认单位为 rpx）
 * @property {String} justify = [end|center|space-around|space-between] Flex 主轴对齐方式
 * @property {String} align = [center|bottom] Flex 交叉轴对齐方式，可选值为
 * @property {Boolean} flexWrap 是否允许折行，默认true
 * @property {String} overflow 同style中overflow属性，默认 hidden
 * @example <s-row></s-row>
 */
export default {
  name: 'SRow',
  mixins: [componentMixin],
  props: {
    justify: String,
    align: String,
    gutter: [Number, String],
    gutterY: [Number, String],
    flexWrap: {
      type: Boolean,
      default: true,
    },
    overflow: String,
  },
  computed: {
    c_style() {
      return this.$mergeStyle({
        overflow: this.overflow,
      }, this.custom_style);
    },
    row_class() {
      return this.$mergeClass({
        [`s-row--justify-${this.justify}`]: this.justify,
        [`s-row--align-${this.align}`]: this.align,
        's-row--flex-wrap': this.flexWrap,
      });
    },
    row_style() {
      let { spaceX, spaceY } = this;
      const style = {};
      if (spaceX) {
        spaceX = '-' + spaceX;
        style.marginLeft = spaceX;
        style.marginRight = spaceX;
      }
      if (spaceY) {
        spaceY = '-' + spaceY;
        style.marginTop = spaceY;
        style.marginBottom = spaceY;
      }
      return this.$mergeStyle(style);
    },
    spaceX() {
      const spaceX = this.$toPx(this.gutter) / 2;
      return spaceX > 0 ? spaceX + 'px' : '';
    },
    spaceY() {
      const spaceY = this.$toPx(this.gutterY) / 2;
      return spaceY > 0 ? spaceY + 'px' : '';
    },
  },
};
</script>

<style lang="scss" src="./index.scss"></style>
